<HTML>
<SCRIPT LANGUAGE="JavaScript"> <!--
/*
----------
Piano Code
----------
THE JAVASCRIPT COOKBOOK by Erica Sadun, webrx@mindspring.com
J. Brook Monroe, mrprogguy@techie.com
Copyright (c)1998 by Charles River Media. All Rights Reserved.
This applet can only be re-used or modifed by license holders of the
JavaScript Cookbook CD-ROM. Credit must be given in the source
code and this copyright notice must be maintained. If you do
not hold a license to the JavaScript Cookbook, you may NOT
duplicate or modify this code for your own use.
Use at your own risk. No warranty is given or implied of the suitability
of this applet for any specific application. Neither Erica Sadun nor
Charles River Media will be held responsible for any unwanted effects
due to the use of this applet or any derivative.
*/
//
// MSIE sound playing facilities aren't quite up to par
// with the NN/NC version, so we have to know which
// browser we're using in order to work correctly.
//
var isIE = (navigator.appName.indexOf('Explorer') != -1);
//-->
</SCRIPT>
<SCRIPT SRC="music-object.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript"><!--
if(!isIE) {
piano = new musicObject("piano");
}
//
// Plays the given WAV file (appends '.WAV' to the given note name)
//
function PlayNote(note)
{
var toPlay = './NOTES/'+note+'.WAV';
if(isIE) {
//
// Have to do the tired 'EMBED in another frame' trick
//
if(parent.frames[1].document.open()) {
parent.frames[1].document.writeln('<HTML><BODY><EMBED SRC="'+toPlay+'" HIDDEN=TRUE AUTOSTART=true></BODY></HTML>');
parent.frames[1].document.close();
}
}
else {
//
// Just play it!
//
if(piano.isReady()) {
piano.setAutostart(true);
piano.play(false,toPlay);
}
}
}
// -->
</SCRIPT>
<BODY bgcolor="ffffff" link="0000ff" vlink="770077">
<FONT COLOR="007777"><H1><IMG SRC="../GRAFX/UTENS.JPG" WIDTH=80 HEIGHT=50
ALIGN = LEFT>J.S. (JavaScript) Bach!</H1></FONT>
<BLOCKQUOTE><FONT COLOR="770000">
This script creates a mini-piano
played with the mouse. <p><FONT COLOR="#007777">To use this recipe, your Netscape browser must be equipped with a WAV audio plugin,
such as <A HREF="http://www.headspace.com/">Beatnik</A>. If you're seeing this page, we've already determined that you're okay and ready to go!</FONT><p>
</FONT></BLOCKQUOTE>
<MAP NAME="keybd">
<AREA COORDS="1,66,26,110" HREF="javascript:PlayNote('C0')">
<AREA COORDS="19,1,35,65" HREF="javascript:PlayNote('C0SHARP')">
<AREA COORDS="28,66,53,110" HREF="javascript:PlayNote('D0')">
<AREA COORDS="47,1,63,65" HREF="javascript:PlayNote('D0SHARP')">
<AREA COORDS="56,66,81,110" HREF="javascript:PlayNote('E0')">
<AREA COORDS="84,66,109,110" HREF="javascript:PlayNote('F0')">
<AREA COORDS="103,1,119,65" HREF="javascript:PlayNote('F0SHARP')">
<AREA COORDS="112,66,137,110" HREF="javascript:PlayNote('G0')">
<AREA COORDS="131,1,147,65" HREF="javascript:PlayNote('G0SHARP')">
<AREA COORDS="140,66,166,110" HREF="javascript:PlayNote('A1')">
<AREA COORDS="159,1,175,65" HREF="javascript:PlayNote('A1SHARP')">
<AREA COORDS="168,66,194,110" HREF="javascript:PlayNote('B1')">
<AREA COORDS="196,66,222,110" HREF="javascript:PlayNote('C1')">
<AREA COORDS="215,1,231,65" HREF="javascript:PlayNote('C1SHARP')">
<AREA COORDS="224,66,250,110" HREF="javascript:PlayNote('D1')">
<AREA COORDS="242,1,259,65" HREF="javascript:PlayNote('D1SHARP')">
<AREA COORDS="252,66,278,110" HREF="javascript:PlayNote('E1')">
<AREA COORDS="280,66,306,110" HREF="javascript:PlayNote('F1')">
<AREA COORDS="299,1,315,65" HREF="javascript:PlayNote('F1SHARP')">
<AREA COORDS="308,66,334,110" HREF="javascript:PlayNote('G1')">
<AREA COORDS="327,1,343,65" HREF="javascript:PlayNote('G1SHARP')">
<AREA COORDS="336,66,362,110" HREF="javascript:PlayNote('A2')">
<AREA COORDS="355,1,371,65" HREF="javascript:PlayNote('A2SHARP')">
<AREA COORDS="364,66,389,110" HREF="javascript:PlayNote('B2')">
<AREA COORDS="392,66,418,110" HREF="javascript:PlayNote('C2')">
<AREA COORDS="411,1,427,65" HREF="javascript:PlayNote('C2SHARP')">
<AREA COORDS="420,66,446,110" HREF="javascript:PlayNote('D2')">
<AREA COORDS="439,1,455,65" HREF="javascript:PlayNote('D2SHARP')">
<AREA COORDS="448,66,473,110" HREF="javascript:PlayNote('E2')">
</MAP>
<SCRIPT LANGUAGE="JavaScript"> <!--
//
// Drop the 'piano player' in here if this is NN/NC (i.e. not MSIE).
//
if(!isIE)
document.writeln('<EMBED SRC="./NOTES/C0.WAV" HIDDEN=TRUE AUTOSTART=false NAME="Piano" MASTERSOUND>');
// -->
</SCRIPT>
<CENTER>
<IMG SRC="KEYBOARD.GIF" HEIGHT=112 WIDTH=476 USEMAP=#keybd BORDER=0>
</CENTER>
<FONT COLOR="007777"><H2>Discussion</H2></FONT>
<FONT SIZE=4>
The combination of images maps and JavaScript can produce powerful results for use in
multimedia pages and applications. For Internet Explorer, we create an empty frame and
rewrite it as necessary to generate the sound for a key; in Navigator/Communicator we
can just address the audio player directly.<BR><BR>The base script for this recipe (<FONT color=770000">JSBACH.HTM</FONT>)
also uses a trick to make sure that the 'invisible frame' necessary for MSIE isn't created if the browser
is NN/NC. (What you see here is <FONT color=770000">PIANOCD.HTM</FONT>).
<BR><BR><h5>Copyright ©1998 by Charles River Media, All Rights Reserved</h5>
<SCRIPT LANGUAGE="JavaScript">
if(!isIE)
document.write('<EMBED SRC="E0.WAV" TYPE="audio/wav" NAME="pianoPlugin" HIDDEN WIDTH=160 HEIGHT=80 AUTOSTART=false ONREADY="piano.setReady()">');
</SCRIPT>
</BODY>
</HTML>